<template>
    <a-radio-group v-model:value="FadeValue">
        <a-radio v-for="{ value, label } in FadeArray" :value="value">{{ label }}</a-radio>
    </a-radio-group>
    <br><br>
    <transition :name="FadeValue">
        <a-button v-if="Status" @click="ShowView">按钮</a-button>
    </transition>
</template>
<script setup>
import { nextTick, ref, watch } from 'vue';

const FadeValue = ref('')
const FadeArray = ref([
    { value: 'fade', label: '淡入淡出' },
    { value: 'fade-left', label: '从左到右' },
    { value: 'fade-right', label: '从右到左' },
    { value: 'fade-top', label: '从上到下' },
    { value: 'fade-bottom', label: '从下到上' },
]);

const Status = ref(true);
const ShowView = () => {
    // 防止重复点击，使动画出现错误
    if (!Status.value) return;
    Status.value = false;
    // 让动画执行完毕再改变状态
    setTimeout(() => {
        Status.value = true;
    }, 500)

}

watch(FadeValue, ShowView)





</script>
<style lang="less" scoped>
.fade {

    /* 淡入淡出效果 */
    &-enter-active,
    &-leave-active {
        transition: opacity 0.5s ease;
    }

    &-enter-from,
    &-leave-to {
        opacity: 0;
    }

    /* 按照方向，改变 transform 属性，就可以控制从哪个方向进入 */ 
    &-left {

        &-enter-active,
        &-leave-active {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        &-enter-from,
        &-leave-to {
            /* X轴 负值 到正值，就是从左侧到右侧展现组件 */
            transform: translateX(-50px);
            opacity: 0;
        }
    }

    &-right {

        &-enter-active,
        &-leave-active {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        &-enter-from,
        &-leave-to {
            transform: translateX(50px);
            opacity: 0;
        }
    }


    &-top {

        &-enter-active,
        &-leave-active {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        &-enter-from,
        &-leave-to {
            transform: translateY(-50px);
            opacity: 0;
        }
    }

    &-bottom {

        &-enter-active,
        &-leave-active {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        &-enter-from,
        &-leave-to {
            transform: translateY(50px);
            opacity: 0;
        }
    }
}
</style>